<script>
import { fetchList } from '@/api/user'
import { mapGetters } from 'vuex'
import router from '@/router'
import { getToken } from '@/utils/auth'

export default {
  data() {
    return {
      searchContent: '',
      page: 1,
      pageSize: 20,
      pageTotal: 0,
      userList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      userInfo: {
        username: '',
        password: '',
        code: '',
        bornDate: '',
        country: '',
        isEnabled: '',
        educationFk: '',
        mail: '',
        major: '',
        majorSkill: '',
        name: '',
        nowRoles: 0,
        sexFk: '0',
        privilege: '',
        province: '',
        resumeFk: 0,
        rolesFk: 1,
        school: '',
        sessionKey: '',
        tel: '',
        userPk: '',
        userStatusFk: '',
        workStatusFk: '',
        headimgurl: '',
        wx: ''
      },
      formLabelWidth: '80px',
      nowRolesOptions: [
        {
          label: '招聘者',
          value: 1
        },
        {
          label: '求职者',
          value: 0
        }
      ],
      sexOptions: [],
      isShow: false,
      headerImgFiles: []
    }
  },
  mounted() {
    this.getData()
  },
  created() {
    console.log(this.roles)
    if (!this.roles.includes('admin')) {
      router.push('/401')
    }
  },
  methods: {
    getToken,
    getData() {
      fetchList(this.page, this.pageSize, this.searchContent)
        .then(res => {
          console.log(res)
          const msg = res.message
          this.userList = msg.list
          this.pageTotal = msg.total
        })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page = val
    },
    reset() {
      this.searchContent = ''
      this.page = 1
      this.pageSize = 20
      this.pageTotal = 0
      this.getData()
    },
    resetFormData() {

    },
    created() {
      this.resetFormData()
      this.isShow = true
    },
    handleError(err, file, fileList) {
      console.log(err)
      this.$message({
        message: file.name + '上传失败',
        type: 'error'
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handlePictureCardPreviewImg(url) {
      this.dialogImageUrl = url
      this.dialogVisible = true
    },
    handleRemoveImg(file, fileList) {
      // console.log(file, fileList)
    },
    handleSuccessImg(response, file, fileList) {
      // console.log(response)
      const url = response.message
      this.userInfo.headimgurl = url
      this.headerImgFiles = [{
        name: file.name,
        url: url
      }]
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  }
}
</script>

<template>
  <div class="app-container">
    <el-dialog :visible.sync="dialogVisible">
      <img :src="dialogImageUrl" alt="" width="100%">
    </el-dialog>
    <el-dialog :visible.sync="isShow" title="用户信息">
      <el-form :model="userInfo">
        <el-row>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="用户账号">
              <el-input v-model="userInfo.name" autocomplete="off" placeholder="请输入公司名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="公司人数">
              <el-input v-model="userInfo.companyPeople" placeholder="请输入公司人数" type="number"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item :label-width="formLabelWidth" label="公司地址">
          <el-input v-model="userInfo.address" autocomplete="off" placeholder="请输入公司地址"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="公司简介">
          <el-input v-model="userInfo.introduce" autocomplete="off" placeholder="请输入公司简介" type="textarea"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="公司福利">
          <el-input v-model="userInfo.benefit" autocomplete="off" placeholder="请输入公司福利" type="textarea"/>
        </el-form-item>

        <el-row>
          <el-col :span="8">
            <el-form-item :label-width="formLabelWidth" label="经营规模">
              <el-select v-model="userInfo.scaleFk" filterable placeholder="请选择公司经营规模">
                <el-option
                  v-for="item in scaleOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label-width="formLabelWidth" label="经营模式">
              <el-select
                v-model="userInfo.typeFk"
                filterable
                placeholder="请选择公司经营模式"
              >
                <el-option
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label-width="formLabelWidth" label="审核状态">
              <el-select v-model="userInfo.state" placeholder="请选择公司审核状态">
                <el-option v-for="item in authStatus" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="归属人">
              <el-select v-model="userInfo.userFk" filterable placeholder="请选择公司归属人">
                <el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item :label-width="formLabelWidth" label="头像">
          <el-upload
            :file-list="headerImgFiles"
            :headers="{
              token:getToken()
            }"
            :limit="1"
            :on-error="handleError"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemoveImg"
            :on-success="handleSuccessImg"
            action="/api/upload/img"
            list-type="picture-card"
          >
            <i class="el-icon-plus"/>
          </el-upload>
        </el-form-item>

        <el-row>
          <el-col :span="24">
            <el-form-item :label-width="formLabelWidth" label="审核备注">
              <el-input v-model="userInfo.authText" autocomplete="off" placeholder="请输入审核备注" type="textarea"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="submitInfo">确 定</el-button>
      </div>
    </el-dialog>
      <div class="d-flex ai-center jc-end" >
        <el-input
          v-model="searchContent"
          placeholder="请输入用户名称"
          prefix-icon="el-icon-search"
          style="max-width: 220px;margin-right: 10px;"
        />
        <el-button type="primary" @click="getData">搜索</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
        <el-button type="primary" @click="created">新增</el-button>
      </div>
    <el-table :data="userList" style="width: 100%;margin-top: 20px" height="75vh">
      <el-table-column label="id" prop="userPk" width="280" />
      <el-table-column label="昵称" prop="name" width="100" />
      <el-table-column label="账号" prop="username" width="200" />
      <el-table-column label="性别" width="120">
        <template slot-scope="scope">
          <div>
            {{scope.row.sexFk === 1 ? '男' : scope.row.sexFk === 0 ? '未知' : '女' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="头像" width="120">
        <template slot-scope="scope">
          <div @click="handlePictureCardPreviewImg(scope.row.headimgurl)">
            <el-avatar :src="scope.row.headimgurl" shape="square" size="medium" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="电话" prop="tel" width="180" />
      <el-table-column label="邮箱" prop="mail" width="230" />
      <el-table-column label="出生日期" prop="bornDate" width="120" />
      <el-table-column label="当前身份" width="120">
        <template slot-scope="scope">
          <div>
            {{scope.row.nowroles == 1 ? '招聘者' : '求职者' }}
          </div>
        </template>
      </el-table-column>
      <!--      <el-table-column label="岗位要求" prop="required" width="380" />-->
      <!--      <el-table-column label="岗位职责" prop="responsibility" width="380" />-->
      <el-table-column label="籍贯" width="120">
        <template slot-scope="scope">
          <div>
            {{scope.row.province}}{{scope.row.city}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="wx-code" width="260" prop="code" />
      <el-table-column label="wx-openId" width="240" prop="openId" />
      <el-table-column label="密码" width="340" prop="password" />
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <div class="d-flex flex-wrap">
            <el-button type="primary">编辑</el-button>
            <el-button type="danger">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="d-flex jc-end">
      <el-pagination
        :total="pageTotal"
        :current-page="page"
        :page-sizes="[20, 50, 100, 200]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<style lang="scss" scoped>

</style>
